<template>
  <div class="solution-list">
    <div class="list-ct">
      <div class="search-box">
        <el-input v-model.trim="query.solutionName" placeholder="请输入方案名称">
          <template #suffix>
            <div class="icon" @click="getList">
              <!-- <span v-html="searchIcon"></span> -->
              <el-icon>
                <Search />
              </el-icon>
            </div>
          </template>
        </el-input>
      </div>
      <el-scrollbar v-loading="isLoading" class="scroll-bar">
        <div v-if="tableData.length || isLoading" class="list">
          <div class="item" v-for="item in tableData" :key="item.id" @click="handleChoose(item)">
            <div class="name-warp">
              <div class="name">{{ item.name }}</div>
              <div class="version">{{ item.version }}</div>
            </div>
            <div class="desc">{{ item.describe }}</div>
          </div>
        </div>
        <Empty v-else-if="Empty" />
      </el-scrollbar>
    </div>
    <Pagination v-if="Pagination" v-model:page="query.pageIndex" v-model:size="query.pageSize" :total="total" />
  </div>
</template>

<script setup lang="ts">
import { getSolutionsByCondition } from "../../api/task/index";
import type { SolutionItem } from "../../api/task/index.d";
import { onMounted, ref } from "vue";
import { Pagination, Empty } from "../../common/index.js";
import "../../common/style.css";
import { Search } from '@element-plus/icons-vue';

const emit = defineEmits(["choose"]);
const isLoading = ref(false);
const query = ref({ pageIndex: 1, pageSize: 30, solutionName: "" });
// const tableData = ref<SolutionItem[]>([]);
const tableData = ref<SolutionItem[]>([
  {
    describe: "测向",
    id: "0c344cf9-8e15-4dc7-93a3-cd0640f5f651",
    name: "无线电监测测向",
    version: "1.0",
    assembly: "Solution.OATS",
    configs: []
  }
]);

const total = ref(0);

onMounted(() => {
  console.log("挂载函数执行");
  getList();
});
const getList = async () => {
  // isLoading.value = true;

  const test = await getSolutionsByCondition(query.value);
  console.log("test", test);

  const {
    data: { list, total_Count }
  } = await getSolutionsByCondition(query.value);
  console.log("测试方案集合", list);
  isLoading.value = false;
  tableData.value = list || [];
  total.value = total_Count || 0;
};
const handleChoose = (row: SolutionItem) => {
  emit("choose", row);
};
</script>

<style lang="scss" scoped>
.solution-list {
  background: #fafafa;
  height: 100%;

  .list-ct {
    padding: 40px;
    height: calc(100% - 136px);

    .search-box {
      width: 40%;
      margin: 0 auto;
      min-width: 400px;

      :deep(.el-input) {
        .el-input__wrapper {
          padding-right: 0;
        }
      }

      .icon {
        background-color: #008efa;
        color: #fff;
        font-size: 14px;
        width: 30px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        cursor: pointer;

        &:hover {
          font-size: 15px;
        }
      }
    }

    .scroll-bar {
      height: calc(100% - 66px);
      margin: 34px 0 0;

      .list {
        display: flex;
        flex-wrap: wrap;
        margin: 0 10%;

        .item {
          background: #ffffff;
          border-radius: 4px;
          border: 1px solid #f0f0f0;
          padding: 14px;
          width: calc(33.33% - 40px / 3);
          margin: 0 20px 20px 0;
          box-sizing: border-box;

          &:nth-child(3n) {
            margin-right: 0;
          }

          &:hover {
            cursor: pointer;
            border-color: #dedede;
          }

          .name-warp {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .name {
              font-size: 14px;
              font-weight: 600;
            }

            .version {
              background: rgba(57, 111, 246, 0.11);
              border-radius: 2px;
              padding: 0 8px;
              height: 20px;
              line-height: 20px;
              color: #008efa;
            }
          }

          .desc {
            color: #616575;
            margin-top: 12px;
          }
        }
      }
    }
  }
}
</style>
